<template>
	<view class="content">
		<u-modal v-model="show" :content="content" @confirm="inHospital" show-cancel-button :confirm-style="confirmStyle"
		 :cancel-style="cancelStyle"></u-modal>
		<view class="content-add mt20">
			<view class="add-top flex" @click="linkAddSelect">
				<view class="add-icon">
					<span class="iconfont center">&#xe614;</span>
				</view>
				<view class="add-info">
					<view class="add-user">
						<span class="userinfo name">用户姓名</span>
						<span class="userinfo phone">12345678910</span>
					</view>
					<view class="add-dress province">
						<span class="userinfo">四川省</span>
						<span class="userinfo">成都市</span>
						<span class="userinfo">高新区</span>
						<span class="userinfo">天府大道中段53号</span>
					</view>
				</view>
			</view>
			<u-gap bg-color="#ffffff" height="20"></u-gap>
			<viwe class="add-bot">
				<text class="add-tit">是否为院内:</text>
				<view class="flex add-sel">
					<view>
						<span class="iconfont userinfo">&#xe614;</span>
						<span class="name">成都宝石花人民医院</span>
					</view>
					<view>
						<u-switch v-model="checked" size="30" active-color="#F74563"></u-switch>
					</view>
				</view>
			</viwe>
		</view>
		<view class="ord-card">
			<view class="ord-tit">预计30分钟内送达</view>
			<view class="ord-itm flex" v-for="item in list" :key="item.id">
				<view class="ord-img">
					<image :src="item.goods_image" mode="aspectFill"></image>
				</view>
				<view class="ord-cen">
					<view class="ord-goodname word-space">{{item.goods_name}}</view>
					<view>
						<u-tag :text="item.goods_spec" size="mini" bg-color="#f7f7f7" color="#A3A3A3" border-color="#f7f7f7" shape="square" />
					</view>
				</view>
				<view class="ord-rig">
					<view class="ord-pri">￥{{item.goods_price}}</view>
					<view class="ord-num">x{{item.number}}</view>
				</view>
			</view>
			<view class="total mt20">
				<view class="flex total-cell">
					<view class="total-tit">商品金额</view>
					<view class="total-info">￥59.90</view>
				</view>
				<view class="flex total-cell">
					<view class="total-tit">配送方式</view>
					<view class="total-info">同城配送</view>
				</view>
				<view class="flex total-cell">
					<view class="total-tit">配送费</view>
					<view class="total-info">￥6.00</view>
				</view>
			</view>
			<view class="fs26 c3 ord-bot">共1件商品 小计：<span class="maincolor">￥123.80</span></view>
		</view>
		<view class="total mt20">
			<view class="flex total-cell" @click="handlePopup">
				<view class="total-tit">优惠券</view>
				<view class="total-info flex">-￥15 <u-icon name="arrow-right" size="24"></u-icon>
				</view>
			</view>
			<view class="flex total-cell">
				<view class="total-tit">配送费</view>
				<view class="total-info">+￥88</view>
			</view>
			<view class="flex total-cell">
				<view class="total-tit">备注</view>
				<view class="total-info iptWidth"><input type="text" value="" placeholder="请输入备注信息(选填）" /></view>
			</view>
		</view>
		<view class="flex ord-pay">
			<view class="pay-lf">合计：<span class="pay-pri">199.00元</span></view>
			<view>
				<u-button shape="circle" :custom-style="customStyle" hair-line="false" @click="linkPayment">提交订单</u-button>
			</view>
		</view>
		<u-popup v-model="popup" mode="bottom" closeable>
			<view class="coupon-top">
				<view>
					<u-tabs :list="titleList" :is-scroll="false" :current="current" @change="change" :show-bar="false" inactive-color="#999999"
					 active-color="#333333" font-size="26" height="86">
					</u-tabs>
				</view>
			</view>
			<view class="content-padd">
				<u-radio-group v-model="isCoupon" @change="radioGroupChange">
					<view class="flex coupon" v-for="(item,index) in couponList" :key="index">
						<view class="coupon-money" :class="current == 1?'importantC9':''">
							<span class="coupon-icon" :class="current == 1?'importantC9':''">￥</span>
							{{item.amount}}
						</view>
						<view class="coupon-info" :class="current == 1?'importantC9':''">
							<view class="info-tit">{{item.name}}</view>
							<view class="info-time">{{item.sTime}}至{{item.eTime}}</view>
							<view class="info-detail">使用规则<u-icon name="arrow-right"></u-icon>
							</view>
						</view>
						<view>
							<u-radio :disabled="current==1" shape="circle" icon-size="36" :name="item.id" active-color="#FC4658"></u-radio>
						</view>
					</view>
				</u-radio-group>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import couponData from "../../../json/coupon.js"
	import coupon from "../../../components/orderitems/coupon.vue"
	export default {
		components: {
			coupon
		},
		data() {
			return {
				show: true,
				popup: false,
				remarks: "",
				checked: false,
				content: '是否在宝石花医院内？',
				isCoupon: 0,
				list: [{
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp", //商品图片
					goods_name: "新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉大...", //商品名称             
					goods_spec: "大码", //商品规格              
					goods_discount: 40.8, //商品折扣            
					goods_price: 58.8, //商品价格             
					checked: true, //是否选中该商品              
					number: 4, //商品购买数量
					id: '201929892'
				}, {
					goods_image: "https://img.alicdn.com/tps/i3/TB1KAtdHXXXXXajXVXXMxXJVFXX-100-100.jpg_250x225Q50s50.jpg_.webp",
					goods_name: "新生婴儿儿衣服套盒刚出生宝宝满月礼物初生用品纯棉大...",
					goods_spec: "中码",
					goods_discount: 40,
					goods_price: 58.8,
					checked: true,
					number: 1,
					id: '201929893'
				}],
				titleList: [{
					name: '可用优惠券（3）'
				}, {
					name: '不可用优惠券（0）'
				}],
				current: 0,
				couponList: [],
				customStyle: {
					background: "#F74562",
					color: "#FFFFFF"
				},
				confirmStyle: {
					background: "#F73656",
					color: "#fff"
				},
				cancelStyle: {
					background: "#F7EFF1",
					color: "#EF1D31"
				},
				iptWidth: {
					width: "510rpx"
				}
			}
		},
		methods: {
			open() {
				this.show = true;
			},
			inHospital() {
				this.checked = true;
			},
			change(index) {
				this.current = index;
			},
			handlePopup() {
				this.popup = true;
			},
			radioChange(e) {

			},
			radioGroupChange(e) {

			},
			linkPayment() {
				uni.navigateTo({
					url: "/pages/order/payment"
				})
			},
			linkAddSelect() {
				uni.navigateTo({
					url: "/pages/address/select"
				})
			}
		},
		created() {
			this.couponList = couponData.canUseList
		}
	}
</script>

<style scoped>
	.content {
		padding: 0 20rpx 128rpx;
	}

	.content-padd {
		padding: 20rpx;
		background: #f0f0f0;
	}

	.center {
		text-align: center;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.content-add {
		width: 100%;
		background: #FFFFFF;
		border-radius: 12rpx;
	}

	.add-top {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.add-icon {
		width: 48rpx;
		height: 48rpx;
		background: #F7274A;
		border-radius: 24rpx;
		line-height: 48rpx;
		text-align: center;
		color: #FFFFFF;
	}

	.add-info {
		width: 600rpx;
	}

	.userinfo {
		display: inline-block;
		margin-right: 10rpx;
	}

	.name {
		color: #333333;
		font-size: 28rpx;
	}

	.phone {
		color: #333333;
		font-size: 28rpx;
	}

	.province {
		color: #999999;
		font-size: 26rpx;
	}

	.add-bot {
		width: 100%;
		padding: 0 20rpx;
	}

	.add-tit {
		width: 100%;
		color: #999999;
		font-size: 28rpx;
	}

	.add-sel {
		width: 100%;
		padding: 0 20rpx;
		margin-top: 45rpx;
		line-height: 36rpx;
	}

	.ord-card {
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.total {
		padding: 0 24rpx;
		background: #FFFFFF;
	}

	.total-num {
		font-size: 26rpx;
		color: #333333;
		text-align: right;
		padding: 32rpx 24rpx 36rpx;
	}

	.total-pri {
		color: #F14951;
	}

	.total-cell {
		padding: 30rpx 0;
	}

	.total-tit {
		color: #999999;
		font-size: 26rpx;
	}

	.total-info {
		color: #333333;
		font-size: 26rpx;
	}

	.iptWidth {
		width: 510rpx;
	}

	.ord-itm {
		padding: 32rpx 10rpx;
		align-items: flex-start;
		border-bottom: 1rpx solid #F0F0F0;
	}

	.ord-tit {
		padding: 30rpx 20rpx;
		font-size: 30rpx;
		color: #333333;
	}

	.ord-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;
	}

	.ord-img image {
		width: 160rpx;
		height: 160rpx;
	}

	.ord-cen {
		width: 335rpx;
	}

	.ord-goodname {
		font-size: 26rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.ord-rig {
		width: 100rpx;
	}

	.ord-pri {
		color: #333333;
		font-size: 24rpx;
	}

	.ord-num {
		font-size: 22rpx;
		color: #999999;
		margin-top: 68rpx;
		text-align: right;
		padding-right: 10rpx;
	}

	.ord-bot {
		padding: 40rpx 20rpx 24rpx;
		border-top: 1rpx solid #f0f0f0;
		text-align: right;
	}

	.ordinfo {
		text-align: right;
		color: #333333;
		fonts: 26px;
		margin-bottom: 24rpx;
	}

	.ordinfo:last-child {
		margin-bottom: 0;
	}

	.payment {
		color: #F14951;
		font-size: 26rpx;
	}

	.ord-ipt {
		width: 500rpx !important;
	}

	.ord-pay {
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background: #FFFFFF;
		z-index: 5;
	}

	.pay-lf {
		font-size: 24rpx;
		color: #333333;
	}

	.pay-pri {
		color: #F14951;
		font-size: 32rpx;
	}

	.coupon {
		background: url(../../../static/couponbg.png) no-repeat center center/100% 100%;
		margin-bottom: 20rpx;
	}
	
	.importantC9{
		color: #999999 !important;
	}

	.coupon:last-child {
		margin-bottom: 0;
	}

	.coupon-money {
		width: 184rpx;
		height: 184rpx;
		color: #F00622;
		font-size: 60rpx;
		text-align: center;
		line-height: 184rpx;
	}

	.coupon-icon {
		color: #F73656;
		font-size: 26rpx;
	}

	.coupon-info {
		width: 458rpx;
		padding: 30rpx 20rpx;
	}

	.info-tit {
		color: #333333;
		font-size: 28rpx;
		line-height: 28rpx;
		margin-bottom: 34rpx;
	}

	.info-time {
		color: #333333;
		font-size: 20rpx;
		line-height: 20rpx;
		margin-bottom: 22rpx;
	}

	.info-detail {
		color: #999999;
		font-size: 20rpx;
		line-height: 20rpx;
	}

	.coupon-top {
		height: 152rpx;
		padding-top: 66rpx;
	}
</style>
